<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>院系管理</title>

    <link rel="stylesheet" href="../static/css/index.css">
    <link rel="stylesheet" href="../static/eui/element-ui.css">

    <script src="../static/js/vue.min.js"></script>
    <script src="../static/js/axios.min.js"></script>
    <script src="../static/eui/index.js"></script>
    <script src="../static/js/ckeditor.js"></script>

    <script src="../static/js/App.js"></script>
    <script src="../static/js/auth.js"></script>
    <script src="../static/js/checkIsLogin.js"></script>
    <script src="../static/js/FormBoxComponent.js"></script>
    <script src="../static/js/DataListComponent.js"></script>
    <script src="../static/js/RefreshComponent.js"></script>
    <script src="../static/js/organization-comm.js"></script>

    <link rel="stylesheet" href="../static/css/template.css">
    <style>
        .ck-editor__editable {
            width: 650px;
            height: 100px;
        }
    </style>
</head>
<body>
<div id="app" style="display: flex;">
    <refresh-comm></refresh-comm>
    <!--组织-->
    <organization-comm :load-index-data="showWin" :index-id="organizationId"></organization-comm>
    <div>
        <!--引用form-box-comm组件-->
        <form-box-comm ref="myForm"
                       :form-type="1"
                       :box-title="boxTitle+'('+organizationName+')'"
                       :add-api-url="url"
                       :edit-api-url="url"
                       :model="model"
                       :id-key="model.id"
                       :before-save="beforeSave"
                       :on-validate="formValidateHandler"
                       :on-success="successHandler">

            <!--添加自己的元素-->
            <template>
                <div class="item">
                    <label for="resourceTypeName">分类名称：</label>
                    <input style="width: 300px;" id="resourceTypeName" v-model="model.resourceTypeName">
                </div>
                <div class="item">
                    <label for="resourceTypeSort">排序：</label>
                    <input type="number" style="width: 50px;" id="resourceTypeSort" v-model="model.resourceTypeSort">
                </div>

                <div class="item">
                    <label for="des">分类描述：</label>
                    <div id="des"></div>
                </div>
            </template>
            <!--添加自己的元素 结束-->
        </form-box-comm>

        <!--引用data-list-comm组件-->
        <data-list-comm ref="myList"
                        :list-api-url="url"
                        :delete-api-url="url"
                        :model-attr="modelAttr"
                        row-id-key="id"
                        :on-add-new-form="onAddNewFormHandler"
                        :on-edit-form="onEditFormHandler"
                        @on-delete-success="onDeleteSuccess"
                        :ref-parent="refParent"
                        is-page="true"></data-list-comm>
    </div>

</div>
<script>

    let vue = new Vue({
        el: "#app",
        data: {
            boxTitle: '新增分类',
            url: global_api_url + "resourceType",
            //默认加载全部数据
            refParent:true,
            //--------------------------------------------------
            //组织
            organizationId:"",
            organizationName:"未分类",
            //--------------------------------------------------
            //表单的对象
            // 表单的对象不一定和列表表单字段一样，所以单独定义
            //对象
            model: {
                id: null,
                resourceTypeName: null,
                resourceDes:null,
                resourceTypeSort: null,
                organizationId:null
            },

            //列表的表单头，支持的定义格式如下：
            modelAttr: [
                {
                    display: '编号',
                    attribute: 'id'
                },
                // {
                //     display: '院系',
                //     attribute: 'organizationId'
                // },
                {
                    display: '分类名称',
                    attribute: 'resourceTypeName'
                },
                {
                    display: '分类描述',
                    attribute: 'resourceDes'
                },
                {
                    display: '排序',
                    attribute: 'resourceTypeSort'
                }
            ],

            ckEditor : null,

        },
        created(){
        
        },
        
        //让DOM挂载完毕后，再设置富文本
        mounted() {
            //是否从其他地方来
            let id = App.getParameter("id");
            let name = App.getParameter("name");
            if(id && name) {
                this.showWin({id,name});
            }else {
                this.refParent = false;
                this.setCkEditor();
            }
        },
        watch:{
            refParent(newVal,oldVal){
                if(newVal == !oldVal) {
                    this.$refs.myList.getModelList(this.url);
                }
            }
        },
        methods: {

            /**
             * 富文本对象创建和设置相关值
             */
            setCkEditor() {
                if(this.model.id != null){
                    let text = this.model.resourceDes? this.model.resourceDes : "";
                    App.initEditor("des", text, this.ckEditor,rs=>this.ckEditor = rs);
                }else{
                    App.initEditor("des", "", this.ckEditor, rs=>this.ckEditor = rs);
                }
            },

            /**
             * 显示右边数据，组织组件钩子
             */
            showWin(item,edit=false){
                if(!edit) {
                    //如果是从左边点击进来，需要初始化窗口
                    this.onAddNewFormHandler();
                }
                this.organizationId = item.id;
                this.organizationName = item.name;

                this.model.organizationId = this.organizationId;

                let url = this.url+"?organizationId="+this.organizationId;

                this.$refs.myList.getModelList(url);
            },

            //保存前，表单组件钩子
            beforeSave(model) {
                model.resourceDes = this.ckEditor.getData();
                return model;
            },

            /**
             * 挂载表单保存数据前，验证方法，表单组件钩子
             * 这个方法必须有true/false返回值
             */
            formValidateHandler(model) {
                if(model.organizationId != null){
                    if(model.resourceTypeName !=null && model.resourceTypeName !=""){
                        if(model.resourceTypeSort !=null && model.resourceTypeSort>0){
                            return true;
                        }else {
                            alert("必须排序，排序是大于0的数字！");
                            return false;
                        }
                    }else {
                        alert("请输入分类名称！");
                        return false;
                    }
                }else{
                    alert("请选择一个院系！");
                    return false;
                }

            },

            /**
             * 数据保存成功后执行，表单组件钩子
             */
            successHandler(data) {
                if(data.code == 0) {
                    this.$message.success(data.msg);
                    console.log("successHandler==>",this.model)
                    this.showWin({
                        id: this.model.organizationId,
                        name:this.organizationName
                    },true);
                }else{
                    this.$message.error(data.msg);
                }

            },

            /**
             *删除成功时调用方法
             *
             */
            onDeleteSuccess(){
                if(data.code == 0) {
                    this.$message.success(data.msg);
                    console.log("successHandler==>",this.model)
                    this.showWin({
                        id: this.model.organizationId,
                        name:this.organizationName
                    });
                }else{
                    this.$message.error(data.msg);
                }
            },

            /**
             * 挂载新建表单方法，列表组件钩子
             */
            onAddNewFormHandler() {
                //恢复原样
                this.model = {};
                this.model.organizationId = this.organizationId;
                this.boxTitle = '新增分类';
                //设置富文本
                this.setCkEditor();

            },

            /**
             * 挂载获得编辑表单方法，列表组件钩子
             */
            onEditFormHandler(row) {
                //打开窗口
                this.boxTitle = `正在修改[${row.resourceTypeName}]`;
                //赋值
                this.model = row;
                this.setCkEditor();
            },
        }
    });

</script>
</body>
</html>